<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,mail=yes">
   <title>Index</title>

   <script src="./js/jquery-1.8.3.min.js"></script>
   <script src="./js/swiper.min.js"></script>
   <link rel="stylesheet" href="./layui/css/layui.css">
   <link rel="stylesheet" href="./css/iconfont.css">
   <link rel="stylesheet" href="./css/animate.css">
   <link rel="stylesheet" href="./css/swiper.min.css">
   <link rel="stylesheet" href="./css/common.css">
   <link rel="stylesheet" href="./css/index.css">
   <script src="./js/wow.min.js"></script>
   <script type="text/javascript" src="./js/clipboard.min.js"></script>
   <script type="text/javascript" src="./layui/layui.js"></script>
   <link rel="stylesheet" href="./css/swiper-bundle.min.css" />

</head>

<body>
   <header data-load="header"></header>

   <main class="ticket">
      <div class="layui-main">

         <p class="mt30 mb30 ft-bold ft24">我的票券</p>
         <div class="bg_white ticket_b1">
            <div class="flex-center mb30">
               <ul class="ul_height ticket_ul1">
                  <li>
                     <a class="item layui-this" href="">已报名(0)</a>
                  </li>
                  <li>
                     <a class="item" href="">未完成(0)</a>
                  </li>
                  <li>
                     <a class="item" href="">已取消(0)</a>
                  </li>
                  <li>
                     <a class="item" href="">退票记录(0)</a>
                  </li>
               </ul>
            </div>
            <ul class="ticket_ul2 w100 ul_height">
               <li class="w100">
                  <div class="item">
                     <div class="b1">
                        <div class="flex-1">
                           <p class="ft20 ft-bold mb5">【線上講座】加拿大留學申請攻略線上講座
                           </p>
                           <p class="ft14 gary_c6">2023-12-04 00:00 ~ 2024-01-03 00:00<br>
                              訂單編號：2311170725116719264470</p>
                        </div>
                        <div class="d-flex">
                           <div class="b1_btn">
                              <p class="ft16 mb5">免费</p>
                              <p class="gary_c9 ft14">订单金额</p>
                           </div>
                           <div class="b1_btn ft14 gary_c9">票卷咨询</div>
                        </div>
                     </div>

                     <table class="layui-table" lay-skin="nob">
                        <colgroup>
                           <col width="180">
                           <col width="150">
                           <col>
                           <col width="100">
                           <col width="250">
                           <col width="110">
                           <col width="220">
                        </colgroup>
                        <thead>
                           <tr>
                              <th>票號</th>
                              <th>參加人姓名</th>
                              <th>票種</th>
                              <th>單價</th>
                              <th>有效期限</th>
                              <th>狀態</th>
                              <th>操作選項</th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                              <td>2311170725111866836035</td>
                              <td>Phina Wang</td>
                              <td>加拿大留學申請攻略 線上講座</td>
                              <td>免費</td>
                              <td>2023-01-01 00:00:00 - 2024-01-01 00:00:00</td>
                              <td>已付款 </td>
                              <td class="orange_c">
                                 <a>退票</a> <a>下载</a> <a data-dialog="ticket">票券详情</a>
                              </td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
               </li>

            </ul>
         </div>
      </div>
   </main>

   <div class="layui-hide">
      <div class="ticket_dia ">
         <p class="ft-bold ft24 t1">票券明細</p>
         <ul>
            <li class="item">
               <p class="t11">票券資訊</p>
               <p class="t12">票號:2311170725111866836035<br>票種:加拿大留學申請攻略線上講座<br>單價:$0<br>有效期限:2023-01-0</p>

            </li>
            <li class="item">
               <p class="t11">參加人資訊</p>
               <p class="t12">姓名:Phina Wang<br>電子郵件:heyyouphina@hotmail.com<br>行動電話:886972853882,88</p>
            </li>
            <li class="item">
               <p class="t11">联系主办单位</p>
               <p class="t12">TKB購課網x放洋留遊學<br>手機號碼：+886 985368799<br>Email：welcomein1314@gmail.com</p>
            </li>
            <li class="item">
               <p class="t11">票券明细</p>
               <p class="t12">加拿大留學申請攻略線上講座<span class="ml5 green_c"> 已使用</span></p>
            </li>
         </ul>
         <div class="b2">

            <button class="layui-btn layui-btn-lg layui-btn-primary layui-border" data-close>取消</button>
         </div>
      </div>
   </div>
</body>
<script src="./js/index.js"></script>
<script>
   var addhtml = $('.ticket_dia')[0].outerHTML;
   $(document).on('click', '[data-dialog="ticket"]', function () {
      layui.use(function () {
         var upload = layui.upload;
         var layer = layui.layer;
         var element = layui.element;
         var $ = layui.$;

         layer.open({
            type: 1, // page 层类型
            area: ['900px', '80%'],
            title: false,
            shade: 0.6, // 遮罩透明度
            closeBtn: 0,
            shadeClose: true, // 点击遮罩区域，关闭弹层
            anim: 0, // 0-6 的动画形式，-1 不开启
            content: addhtml
         });
      })

   })
   $(document).on('click', '[data-close]', function () {
      layer.closeAll()
   })

</script>


</html>